import { request } from '@/utils'
import { token } from '@/utils/token'
import { defineComponent, ref, reactive } from '@vue/runtime-core'
import { Input, Button, Form, message } from 'ant-design-vue'
import './Login.less'

const Login = defineComponent(() => {

  const loading = ref(false)
  const model = reactive({ username: '', password: '' })

  const onFinish = () => {
    loading.value = true
    request.post('admin/login', model).then(res => {
      token.set(res.data.access_token)
      message.success('登录成功')
      window.location.reload()
    }, () => {
      loading.value = false
    })
  }

  return () => (
    <div class="page-login">
      <div class="bg">
        <div class="panel">
          <h2>Office 365 Authorize Service</h2>
          <Form model={model} onFinish={onFinish} layout="vertical" rules={{
            username: { required: true, min: 4, max: 32 },
            password: { required: true, min: 6, max: 32 },
          }}>
            <Form.Item label="Username" name="username">
              <Input v-model={[model.username, 'value']} />
            </Form.Item>
            <Form.Item label="Password" name="password">
              <Input type="password" v-model={[model.password, 'value']} />
            </Form.Item>
            <Form.Item class="item-btns">
              <Button htmlType="submit" type="primary" loading={loading.value}>Sign in</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )

})

export default Login